<template>
    <div class="report-page">
        <div class="section-title">报告文件</div>

        <!-- 报告列表 -->
        <div class="report-list">
            <div v-if="reports.length > 0">
                <VuePdfEmbed :source="reports[0]?.url" :page="1" class="vue-pdf-embed multi-page" />
                <van-cell v-for="(report, index) in reports" :key="index" :title="report.name" is-link
                    @click="viewReport(report)">
                    <template #right-icon>
                        <van-icon name="eye" style="margin-right: 10px;" />
                        <van-icon name="down" @click.stop="downloadReport(report)" />
                    </template>
                </van-cell>

            </div>
            <div v-else class="no-data">暂无报告文件</div>
        </div>

        <!-- 使用统一的PDF查看器 -->
        <!-- 在 reportPage.vue 中 -->
        <PdfViewerModal ref="PdfViewerModalRef" :pdf-url="currentReport?.url" :title="currentReport?.name || '报告预览'"
            @download="downloadCurrentReport" />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getFilePathById } from '../api/uploadFliePath'
import { defineAsyncComponent } from 'vue'
const PdfViewerModal = defineAsyncComponent(() =>
    import('../components/PdfViewerModal.vue')
)
const VuePdfEmbed = defineAsyncComponent(() =>
    import('vue-pdf-embed')
)
// 报告相关
const reports = ref<Array<{ name: string, url: string }>>([])
const currentReport = ref<{ name: string, url: string } | null>(null)
const showPdfViewer = ref(false)
const PdfViewerModalRef = ref<any>(null)
// 查看报告
const viewReport = (report: { name: string, url: string }) => {
    currentReport.value = report
    showPdfViewer.value = true
    if (PdfViewerModalRef.value) {
        PdfViewerModalRef.value?.open()
    }
}

// 下载指定报告
const downloadReport = (report: { name: string, url: string }) => {
    // 使用window.open打开链接
    window.open(report.url, '_blank')
}

// 下载当前查看的报告
const downloadCurrentReport = () => {
    if (currentReport.value) {
        downloadReport(currentReport.value)
    }
}

// 获取报告数据
const fetchReports = async (id: any) => {
    if (!id || id === 'undefined') {
        console.warn("无效的ID参数:", id)
        return
    }

    try {
        const basicUrl = "https://www.jyszprd.com/h5-api/"
        const response: any = await getFilePathById(id)
        if (response.data && response.data.pdf) {
            // 根据实际返回的数据结构构造报告列表
            reports.value = [{
                name: response.data.pdf.split('/').pop() || "报告文件.pdf",
                url: basicUrl + response.data.pdf
            }]
        } else {
            reports.value = []
        }
    } catch (err) {
        console.log("获取报告失败", err)
    }
}

onMounted(async () => {
    let user = JSON.parse(localStorage.getItem('user')!)
    await fetchReports(user.enterpriseId)
})
</script>

<style scoped>
.report-page {
    padding: 10px;
    min-height: 100vh;
}

.section-title {
    text-align: center;
    font-weight: bold;
    background-color: #e0e0e0;
    padding: 10px;
    margin: 10px 0;
    font-size: 16px;
    width: 90vw;
}

.report-list {
    margin-bottom: 20px;
}

.no-data {
    text-align: center;
    padding: 20px;
    color: #999;
}
</style>